<template>
	<view>
		<view class="relative h60vh over-hidden relative t-map " :style="'height:'+topStyle+';'">
			<map class="w100b h100b relative " :controls="controls" id="maps" :latitude="latitude"
				:longitude="longitude" :style="'height:'+topStyle+';'">
				<cover-image class="absolute w42 h42 ml30 " src="../../../static/new/cha.png"
					:style="'top:'+StatusBar+10+'px'+';'"></cover-image>
			</map>
		</view>
		<view class=" bgfff pt20 pb20 bsbox " id="mainBox" :style="btmStyle">
			<view class="dsf jcsb alc pl35 pr35 ">
				<view class="path-content ">
					<text class="path-title ">{{pathTitle}}</text>
					<text class="path-content-detail ">{{pathContent}}</text>
				</view>
				<view @click="openloaction" class="w140 h56 dsf alc jcc fz24 col333 bde8 bdra10 ">更改地址</view>
			</view>
			<view class="dsf pl24 pr24 pt24 ">
				<input class="h100upx w100b bsbox bdra10 bgEEF2FD pl24 pr24 fz28 col333 " placeholder="楼层及门牌号"
					placeholderClass="col666" v-model="receiveAddressDetail"></input>
			</view>
			<!--<view class="pl24 pr24 pt30 ">
				<view class="w100b h100upx dsf alc bgEEF2FD pr24 bsbox ">
					<input class="h100upx w160 bsbox bdra10  pl24 pr24 fz28 col333 " placeholder="姓名"
						placeholderClass="col666" v-model="userName"></input>
					<view class="address-bar "></view>
					<input class="h100upx fg1 bsbox bdra10  pl24 pr24 fz28 col333 " placeholder="手机/座号"
						placeholderClass="col666" v-model="userPhone"></input>
					<view class="w120 h62 dsf alc jcc fz28 col333 bd999 bdra10 ">通讯录</view>
				</view>
			</view>-->
			<view class="dsf alc jcsb pl24 pr24 pt24 ">
				<view @click="submit" class="address-button h82 dsf alc jcc fz30 colfff fwb bg0083FE bdra10 ">
					确定
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				wx_longitude: 0,
				wx_latitude: 0,
				longitude: 0,
				latitude: 0,
				isAddress: !1,
				StatusBar: this.StatusBar,
				zoom: 16,
				receiveAddressDetail: "",
				userName: "",
				userPhone: "",
				active: !1,
				pathContent: "",
				pathTitle: "",
				controls: [{
					id: 1,
					iconPath: "https://dingdianfreight.oss-cn-guangzhou.aliyuncs.com/main/static/new/zb-xie.png",
					position: {
						left: 180,
						top: 150,
						width: 28,
						height: 42
					}
				}],
				AddressData: {},
				type: "",
				bookid: 0,
				source: "",
				SystemInfo: {},
				btmStyle: [0, 0],
				topStyle: 0,
				isIPX: this.isIPX,
				loading: !0,
				show: !0,
				addressPrompt: "确认卸货地址"
			}
		},
		onLoad(t) {
			if (this.type = t.type, this.adaption(), t.book && (this.AddressData = {}, this.source = "book", "edit" == t
					.book)) {
				var e = JSON.parse(t.address);
				this.bookid = e.id, this.AddressData = e.address
			}
		},
		onShow() {

		},
		onReady() {
			var e = this;
			uni.createSelectorQuery().select(".t-map").boundingClientRect((function(t) {
				e.controls[0].position.left = t.width / 2 - 14, e.controls[0].position.top = t.height / 2 - 21
			})).exec()
		},
		methods: {
			adaption() {
				var e = this,
					i = uni.getSystemInfoSync(),
					s = this.isIPX;
				this.SystemInfo = i, setTimeout((function() {
					uni.createSelectorQuery().in(e).select("#mainBox").boundingClientRect((function(t) {
						e.show = !0;
						var a = t.height + 10,
							n = {
								height: a,
								paddingBottom: 10
							};
						s && (a += 30, n.height = a, n.paddingBottom = 40), e.btmStyle = [n
								.height, n.paddingBottom
							], e.topStyle = i.screenHeight - n.height + "px", e.loading = !1,
							"delive" == e.type ? (e.AddressData = e.$store.getters
								.deliveAddress, e.addressPrompt = "确认装货地址", e.controls[0]
								.iconPath =
								"https://dingdianfreight.oss-cn-guangzhou.aliyuncs.com/main/static/new/zb-zhuang.png"
							) : (e.AddressData = e.$store.getters.currentReceiveAddress, e
								.addressPrompt = "确认卸货地址", e.controls[0].iconPath =
								"https://dingdianfreight.oss-cn-guangzhou.aliyuncs.com/main/static/new/zb-xie.png"
							), e.mapReady()
					})).exec()
				}), 300)
			},
			initData() {
				this.latitude = this.AddressData.latitude, this.longitude = this.AddressData.longitude, this
					.pathTitle = this.AddressData.mapAddress, this.pathContent = this.AddressData.mapAddressDetail,
					this.receiveAddressDetail = this.AddressData.receiveAddressDetail, this.userName = this.AddressData
					.userName, this.userPhone = this.AddressData.userPhone, this.mapContext = t.createMapContext(
						"maps", this), this.controls[0].position.left = this.SystemInfo.screenWidth / 2 - 15, this
					.controls[0].position.top = .6 * this.SystemInfo.screenHeight / 2 - 24
			},
			mapReady() {
				this.AddressData = this.AddressData == undefined ? {} : this.AddressData;
				"{}" != JSON.stringify(this.AddressData) ? this.initData() : this.initMap()
			},
			initMap() {
				var e = this,
					i = this.$store.getters.city;
				i ? (this.longitude = i.lng, this.latitude = i.lat, this.mapContext = uni.createMapContext("maps",
						this),
					this.controls[0].position.left = this.SystemInfo.screenWidth / 2 - 15, this.controls[0]
					.position.top = .6 * this.SystemInfo.screenHeight / 2 - 24, this.setPath(i)) : uni.getLocation({
					type: "wgs84",
					isHighAccuracy: !0,
					success(i) {
						e.latitude = i.latitude, e.longitude = i.longitude, e.mapContext = uni.createMapContext(
								"maps", e), e.controls[0].position.left = e.SystemInfo
							.screenWidth / 2 - 15, e.controls[0].position.top = .6 * e.SystemInfo
							.screenHeight / 2 - 24, e.setPath(i)
					},
					fail(t) {
						u.default.toast(e.$t("请开启手机GPS定位"))
					}
				})
			},
			openloaction() {
				var e = this;
				console.log(1234);
				uni.chooseLocation({
					longitude: this.longitude,
					latitude: this.latitude,
					success(t) {
						e.wx_latitude = t.latitude, e.wx_longitude = t.longitude, e.setPath(t)
					}
				})
			},
			onMapRegionChange(t) {
				var e = "";
				switch (this.SystemInfo.platform) {
					case "android":
						e = t.type;
						break;
					case "ios":
						e = t.detail.type;
						break;
					default:
						e = t.detail.type
				}
				"begin" === e || "end" !== e && "regionchange" != e || (this.wx_latitude = t.detail.centerLocation
					.latitude, this.wx_longitude = t.detail.centerLocation.longitude, this.setPath({
						latitude: t.detail.centerLocation.latitude,
						longitude: t.detail.centerLocation.longitude
					}))
			},
			setPath(t) {
				//console.log(t,"===t===t===");
				this.$api["post"]("common/tencent-map/analysis", {
					lat: t.latitude,
					lng: t.longitude
				}).then(res => {
					if (res.code == 200) {
						this.pathTitle = res.data.formatted_addresses.recommend;
						this.pathContent = res.data.address;
					}
				});
			},
			submit() {
				var e = {
					longitude: this.wx_longitude || this.longitude,
					latitude: this.wx_latitude || this.latitude,
					mapAddress: this.pathTitle,
					mapAddressDetail: this.pathContent,
					receiveAddressDetail: this.receiveAddressDetail
				};
				this.$store.commit("setDelive",e);
				this.$go('newaddress/address/editbook');
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background: #fff
	}

	.bm-view {
		height: 100%;
		width: 100%
	}

	.map-index {
		height: 0
	}

	.map-index .map-marker {
		position: fixed;
		top: 314upx;
		width: 100%;
		z-index: 20
	}

	.map-index .map-icon {
		display: block;
		margin: 0 auto
	}

	.map-index .map-title {
		word-wrap: break-word;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		border-color: #ccc;
		border-radius: 5upx;
		color: #0083fe;
		display: block;
		display: -webkit-box;
		font-size: 30upx;
		font-weight: 700;
		height: 50upx;
		line-height: 50upx;
		margin: 0 auto;
		overflow: hidden;
		padding: 10upx;
		text-align: center;
		text-overflow: ellipsis;
		white-space: normal !important
	}

	.map-index .map-title2 {
		background-color: #fff;
		display: inline-block
	}

	.is-address {
		margin-left: 5upx
	}

	.path-content .path-title {
		color: #0083fe;
		display: block;
		font-size: 36upx;
		font-weight: 700;
		margin: 2upx
	}

	.path-content .path-content-detail {
		color: grey;
		margin: 2upx
	}

	.BMap_Marker ._img {
		width: 20upx
	}

	.BMapLabel {
		top: -32prx
	}

	.address-button {
		margin: 0 auto;
		text-align: center;
		width: 90%
	}

	.address-bar {
		background-color: #666;
		height: 36upx;
		width: 2px
	}
</style>